<template>
	<view class="duo-guide p-2" :style="{ paddingTop: safeAreaTop + 'px' }">
		<view class="guide-content">
			<text>人类图中的“伙伴合图”（Composite&nbsp;Chart）是一种分析两人关系动态的工具，通过结合两张个人的人类图，揭示双方能量互动的模式、潜在挑战和协同潜力。</text>
			<view class="flex-r s-b a-c mt-1">
				<view class="tag">
					基本信息对比
				</view>
				<view class="tag">
					家庭与感情配合度
				</view>
			</view>
			<view class="flex-r s-b a-c mt-1">
				<view class="tag">
					事业与工作配合度
				</view>
				<view class="tag">
					健康与生活习惯
				</view>
			</view>
			<view class="flex-r s-b a-c mt-1">
				<view class="tag">
					财富积累与金钱观
				</view>
				<view class="tag">
					关系总结与合作建议
				</view>
			</view>
			<view class="video flex-c a-c j-c">
				<text class="iconfont icon-shipinbofang mb-1" />
				观看视频了解更多
			</view>
			<view class="example flex-r a-c j-c">
				查看示例 <text class="iconfont icon-zuozuo" />
			</view>
		</view>
		<button class="button-active mt-3">+ 新增合图</button>
	</view>
</template>

<script setup>
const safeAreaTop = uni.$safeArea?.safeAreaTop || 44;
</script>

<style lang="scss" scoped>
	.duo-guide {
		.guide-content {
			background: linear-gradient(180deg, #FFEEDC 0%, #FFF9EC 100%);
			border-radius: 20rpx;
			padding: 40rpx 30rpx;

			text {
				font-size: 28rpx;
				line-height: 64rpx;
			}

			.tag {
				width: 294rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				background: #B86A4F;
				border-radius: 8rpx;
				padding: 16rpx 0;
				text-align: center;
			}

			.video {
				font-size: 26rpx;
				color: #6F6F6F;
				margin-top: 100rpx;

				i {
					font-size: 60rpx;
				}
			}

			.example {
				font-weight: 500;
				font-size: 28rpx;
				color: #797979;
				margin-top: 100rpx;
				margin-bottom: 40rpx;

				.iconfont {
					color: #FED523;
				}
			}
		}
	}
</style>